<template>
  <div class="echarts_box">
    <div
      class="echarts_box"
      ref="echarts_box"
      :style="{ opacity: data.length == 0 ? '0' : '1' }"
    ></div>
    <!---------------------- 无数据时显示 ---------------------->
    <Nodata class="Nodata" v-show="data.length == 0"></Nodata>
  </div>
</template>
  
  <script>
// const elementResizeDetectorMaker = require("element-resize-detector");
export default {
  mounted() {},
  computed: {
    // ...mapGetters(["echartsColor"]),
  },
  watch: {
    data: "drawLine", // 数值变化是更新图表
    color: "drawLine", // 数值变化是更新图表
  },
  props: {
    color: {
      // 传入的颜色
      type: Array | Object,
      default: function () {
        return [];
      },
    },
    legendLeft: {
      // 图例左侧位置
      type: String,
      default: "65%",
    },

    data: {
      // 返回的数据
      type: Array | Object,
      default: function () {
        return [
          {
            value: 520,
            name: "温度",
          },
          {
            value: 280,
            name: "湿度",
          },
          {
            value: 100,
            name: "UPS",
          },
          {
            value: 100,
            name: "门禁",
          },
          {
            value: 100,
            name: "消防",
          },
        ];
      },
    },
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      try {
        var cw = document.body.clientWidth;
        this.$nextTick(() => {
          let myChart = this.$echarts.init(this.$refs.echarts_box);
          // let colorList = [];
          let colorList = [
            "#25D5E8",
            "#00C662",
            "#0690F3",
            "#FF831F",
            "#F54444",
            "#115FEA",
            "#10EBE3",
            "#10A9EB",
            "#EB9C10",
            "#2E10EB",
            "#9B10EB",
          ];
          let option = {
            // backgroundColor: '#031d33',
            tooltip: {
              show: true,
            },

            radar: {
              radius: "68%", //大小
              nameGap: 10, // 图中工艺等字距离图的距离
              center: ["50%", "50%"], // 图的位置
              name: {
                textStyle: {
                  color: "rgba(207,238,252,1)",
                  fontSize: 11,
                },
                formatter: function (name) {
                  return name;
                },
              },
              shape: "circle",
              indicator: [
                { name: "温度", max: "100" },
                { name: "预期", max: "100" },
                { name: "湿度", max: "100" },
                { name: "天气", max: "100" },
                { name: "风级", max: "100" },
              ],
              axisLine: {
                show: false,
                lineStyle: {
                  color: "rgba(153, 209, 246, 0.2)",
                },
              },
              splitArea: {
                show: false,
                areaStyle: {
                  color: "rgba(255,0,0,0)", // 图表背景的颜色
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  width: 1,
                  color: "rgba(207,238,252,0.1)", // 设置网格的颜色
                },
              },
            },
            series: [
              {
                name: "",
                type: "radar",
                symbol: "none",
                itemStyle: {
                  normal: {
                    areaStyle: { type: "default" },
                  },
                },
                data: [
                  {
                    symbol: "none",
                    symbolSize: 5,
                    value: [70, 42, 63, 84,45],
                    areaStyle: { color: "rgba(255,145,37, 0.3)" },
                    itemStyle: {
                      normal: {
                        borderWidth: 0,
                        color: "RGBA(255,145,37, 1)",
                        borderColor: "rgba(255,145,37, 1)",
                      },
                    },
                    lineStyle: {
                      color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                          {
                            offset: 0,
                            color: "rgba(255,145,37,1)", // 0% 处的颜色
                          },
                          
                          {
                            offset: 1,
                            color: "rgba(255,145,37,1)", // 100% 处的颜色
                          },
                        ],
                        globalCoord: false, // 缺省为 false
                      },
                      width: 1,
                    },
                  },
                ],
              },
             
            ],
          };

          myChart.setOption(option);
          /* 大小自适应 */
          window.addEventListener("resize", () => {
            // h = this.$refs.echarts_box.offsetHeight;
            // console.log(h);
            myChart.resize();
          });
          myChart.resize();
        });
      } catch (e) {
        console.log(e);
        // 错误处理代码片段
      }
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.echarts_box {
  width: 100%;
  height: 100%;
  position: relative;
  .Nodata {
    position: absolute;
    top: 0;
    z-index: 10;
  }
}
</style>
  